<template>
	<view>
		<view class="bg-black" :style="[{paddingTop:StatusBar+'px'}]">
			<view class="cu-bar search">
				<view class="cu-avatar round" style="background-image:url(https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIfkkzL0zbsGoT207WKibHLnCgxG3XSibQ93YXXMw1ic3AjBRtr2jAoWv8Bs6WzWVibqdMLricE1nj1Bjg/132);"></view>
				<view class="content">
					工作台
				</view>
				<view class="action">
					消息
				</view>
			</view>
		</view>
		<view class="bg-black text-light padding-sm flex justify-between" >
			<view>欢迎您 张博先生，恭喜发财</view>
		</view>
		
		<view>
			<view class="cu-list grid no-border col-4">
				<view class="cu-item" v-for="(item,index) in orderStateList" :key="index">
					<view class="text-black">
						<!-- <view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view> -->
						{{ item.count }}
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="padding-sm">
			<view class="cu-list grid no-border col-3" style="border-radius: 5px;">
				<view class="cu-item" v-for="(item,index) in gridList" :key="index" @tap="toPage" :data-url="item.url">
					<view class="cuIcon-add text-black">
						<!-- <view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view> -->
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="padding-sm">
			<view class="bg-white padding text-light" style="border-radius: 5px;">
				<view class="solids-bottom padding-bottom-xs flex justify-between">
					<view class="padding-lr-sm">店铺订单数据</view>
					<view class="padding-lr-sm">更多</view>
				</view>
				<view class="cu-list grid col-2 no-border">
					<view class="cu-item">
						<view class="flex margin-top-sm align-center">
							<view class="flex-treble">待支付订单</view>
							<view class="flex-twice">100</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="flex margin-top-sm align-center">
							<view class="flex-treble">待发货订单</view>
							<view class="flex-twice">1</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="flex margin-top-sm align-center">
							<view class="flex-treble">送货中订单</view>
							<view class="flex-twice">2</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="flex margin-top-sm align-center">
							<view class="flex-treble">已完成订单</view>
							<view class="flex-twice">5</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="flex margin-top-sm align-center">
							<view class="flex-treble">调货订单</view>
							<view class="flex-twice">999</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				gridList: [
					{
						name: "分类管理",
						url: "/pages/home/categories/categories"
					},
					{
						name:"商品管理",
						url: "/pages/home/commodity/commodity"
					},
					{
						name:"商品货源",
						url: "/pages/home/categories"
					},
					{
						name:"做图设计",
						url: "/pages/home/categories"
					},
					{
						name:"工人服务",
						url: "/pages/home/categories"
					},
					{
						name:"配送服务",
						url: "/pages/home/categories"
					},
					{
						name:"评论管理",
						url: "/pages/home/categories"
					}
				],
				orderStateList:[
					{
						"name": "店铺访问量",
						"count": 100,
					},
					{
						"name": "出售中",
						"count": 500,
					},
					{
						"name": "今日订单数",
						"count": 100,
					},
					{
						"name": "今日收入",
						"count": 100,
					}
				],
				viewCount:85451,
			}
		},
		created(e) {
			_this = this;
			var i = 0;
			numDH();
			function numDH(){
				if (i < 20) {
					setTimeout(function () {
					  _this.orderStateList[0].count = i;
					  _this.orderStateList[1].count = i;
					  _this.orderStateList[2].count = i;
					  _this.orderStateList[3].count = i;
					  i++
					  numDH();
					}, 20)
				}else{
					_this.orderStateList[0].count = _this.coutNum(54484841);
					_this.orderStateList[1].count = _this.coutNum(5550);
					_this.orderStateList[2].count = _this.coutNum(3001);
					_this.orderStateList[3].count = _this.coutNum(1234581);
				}
			}
			
		},
		methods: {
			coutNum(e) {
			  if (e > 1000 && e < 10000) {
				e = (e / 1000).toFixed(1) + 'k'
			  }
			  if (e > 10000) {
				e = (e / 10000).toFixed(1) + 'W'
			  }
			  return e
			},
			toPage(e){
				var url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>

</style>
